<template>
  <div class="inspectTaskInfo" style="width: 80%;height: 100%">
    <div>
      <el-form ref="ruleForm" label-position="right" label-width="150px" class="demo-ruleForm">
        <el-form-item label="任务名称：" prop="name">
          {{taskInfo.name}}
        </el-form-item>
        <el-form-item label="质检对象：" prop="categoryName">
          {{taskInfo.categoryName}}
        </el-form-item>
        <el-form-item label="质检区域：" prop="areaName">
          {{taskInfo.areaName}}
        </el-form-item>
        <el-form-item label="质检数据量：" prop="inspectCount">
          {{taskInfo.inspectCount}}
        </el-form-item>
        <el-form-item label="创建人：" prop="createByName">
          {{taskInfo.createByName}}
        </el-form-item>
        <el-form-item label="创建时间：" prop="createTime">
          {{taskInfo.createTime}}
        </el-form-item>
        <el-form-item label="质检次数：" prop="inspectTimes">
          {{taskInfo.inspectTimes}}
        </el-form-item>
        <el-form-item label="历史版本汇总：" prop="name">
          <el-table :data="inspectResultList" style="width: 100%" max-height="250" align="center">
            <el-table-column prop="id" label="质检编号">
            </el-table-column>
            <el-table-column
                prop="createTime"
                label="质检时间"
                width="200">
            </el-table-column>
            <el-table-column
                prop="createByName"
                label="质检人">
            </el-table-column>
            <el-table-column
                prop="passCount"
                label="已通过(个)">
            </el-table-column>
            <el-table-column
                prop="failCount"
                label="未通过(个)">
            </el-table-column>
            <el-table-column
                prop="passRatio"
                label="通过率(%)">
            </el-table-column>
            <el-table-column prop="areaName" label="质检区域">
              <template >
                <span>{{ taskInfo.areaName}}</span>
              </template>
            </el-table-column>
            <el-table-column
                prop="feedbackTag"
                label="是否反馈">
            </el-table-column>
<!--            <el-table-column-->
<!--                fixed="right"-->
<!--                label="操作"-->
<!--                width="100">-->
<!--              <template>-->
<!--                <el-button type="text" size="small">查看</el-button>-->
<!--              </template>-->
<!--            </el-table-column>-->
          </el-table>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Prop, Vue, Watch} from 'vue-property-decorator';
import {
  getTaskDetail
} from '@/api/inspectTask';

@Component({
  components: {}
})
export default class InspectTaskInfo extends Vue {
  @Prop() taskId: any;
  public taskInfo : any = {};
  public inspectResultList: any = [];
  @Watch('taskId')
  getTaskInfo(taskId?:number){
    getTaskDetail({taskId: taskId}).then(res =>{
      if (res) {
        this.taskInfo = res.data
        if (res.data.inspectResultList) {
          this.inspectResultList = res.data.inspectResultList
        }
      }
    });
  }
  mounted(){
    this.getTaskInfo(this.taskId);
  }
}
</script>
<style lang="scss" scoped>
.inspectTaskInfo{
  background-color: #ffffff;
  padding: 12px 0;
  .haz-header{
    height: 28px;
    line-height: 28px;
    color: #448f7d;
    padding-left: 18px;
    border-left: 3px solid #448f7d;
    font-size: 14px;
    font-weight: bold;
    background: linear-gradient(to right, #e1f5f1, rgba(255, 255, 255, 1));
  }
}
.el-form-item {
  margin-bottom: 2px; /* 调整为需要的值 */
}

</style>
